<template>
  <div id="app">
  	<transition name="vux-pop-in">
    	<router-view class="child-view"></router-view>
   </transition>  
  </div>
</template>

<script>
export default {
  name: 'app',
  data () {  
    return {  
    	
    } 
  }
}
</script>

<style lang="less">
@import '~vux/src/styles/reset.less';

body {
  background-color: #fff; overflow-x: hidden;
} 
	
body,a,p,li,ul,h1,h2,h3,h4,h5,strong,div,img{
	font-size: 0.14rem; font-family: "微软雅黑",arial; margin: 0; padding: 0; border: none;
}
a{
	text-decoration: none;
}
input:focus,select:focus,textarea:focus{
	border: 0.01rem solid #66afe9 !important; -webkit-box-shadow:1px 1px 10px rgba(102,175,233,0.8);box-shadow:1px 1px 10px rgba(102,175,233,0.8);
}

/* 路由切换动画 */
.child-view {  
  position: absolute; left: 0; top: 0; width: 100%; height: 100%; -webkit-transition: all 0.5s cubic-bezier(.55,0,.1,1);  transition: all .5s cubic-bezier(.55,0,.1,1);  
}  
.vux-pop-out-enter-active,
.vux-pop-out-leave-active,
.vux-pop-in-enter-active,
.vux-pop-in-leave-active {
  will-change: transform; transition: all 0.5s; height: 100%; position: absolute;  backface-visibility: hidden;  perspective: 1000;
}
.vux-pop-out-enter {
  opacity: 0; transform: translate3d(-100%, 0, 0);
}
.vux-pop-out-leave-active {
  opacity: 0; transform: translate3d(100%, 0, 0);
}
.vux-pop-in-enter {
  opacity: 0; transform: translate3d(100%, 0, 0);
}
.vux-pop-in-leave-active {
  opacity: 0; transform: translate3d(-100%, 0, 0);
}
</style>
